<!--
 * @Author: your name
 * @Date: 2020-08-26 17:32:56
 * @LastEditTime: 2020-08-26 17:51:40
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \01-vue3-vite\src\components\HelloWorld.vue
-->
<template>
  
  <h1>{{state.count}}*2={{double}}</h1>
  <h2>{{num}}</h2>

  <button @click="add">ADD</button>
</template>

<script>

// 引入vue3.0
import{reactive,computed,ref,onMounted} from 'vue'

export default {
  // name: 'HelloWorld',
  // props: {
  //   msg: String
  // },
  // data() {
  //   return {
  //     count: 0
  //   }
  // }

  setup(){
     // reactive 负责复杂的数据结构
    const state=reactive({
      count:1
    })
    function add(){
      state.count++
      num.value+=10
    }

    const num = ref(2)
    
    const double = computed(      ()=>state.count*2      )

    onMounted(()=>{
      console.log('mouted')
    })
    return {
      state,
      add,
      double,
      num
    }
  }
}
</script>
